<template>
  <div>
    <p>v-model 自定义修饰符</p>
    <el-input v-model.formatNumber="number"></el-input>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  props: {
    modelModifiers: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props, context) {
    const addThousandSeparators = (num: any) => {
      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    };
    const number = ref(0);
    const handleInput = (e: any) => {
      let value = e.target.value;
      if (props.modelModifiers.formatNumber) {
        value = addThousandSeparators(value);
      }
      // context.emit('update:modelValue', removeThousandSeparators(value));
    };
    return {
      handleInput,
      number,
    };
  },
});
</script>
